<template>
  <el-container class="editor">
    <el-header class="p-0">
      <editor-header />
    </el-header>
    <el-main class="editor-main flex p-0">
      <editor-left />
      <editor-center class="flex-1 editor-center" />
      <editor-right />
    </el-main>
  </el-container>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import EditorHeader from "./components/EditorHeader.vue";
import EditorLeft from "./components/EditorLeft.vue";
import EditorRight from "./components/EditorRight.vue";
import EditorCenter from "./components/EditorCenter.vue";
export default defineComponent({
  name: "Editor",
  components: {
    EditorHeader,
    EditorLeft,
    EditorRight,
    EditorCenter,
  },
  setup() {
    return {};
  },
});
</script>
<style lang="scss" scoped>
.editor-main {
  height: calc(100vh - 60px);
  overflow: hidden;
}
.editor-left,
.editor-right {
  width: 300px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  transition: 0.3s;
  box-sizing: border-box;
}
.editor-right {
  width: 334px;
}
.editor-center {
  background: #f0f2f5;
}
</style>

<style lang="scss">
.editor {
  .el-card__header {
    padding: 10px 20px;
  }
}
</style>
